<template>
	<div v-if="item">
		<!-- 轮播组件 -->
		<Carousel :urls="item.urls" :height="300" autoplay />
		<div class="content">
			<h3>{{ item.title }}</h3>
			<p class="desc">
				<span>{{ item.auth }}</span>
				<span>{{ item.createTime }}</span>
			</p>
		</div>
	</div>
</template>


<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios'
import Carousel from '@/components/carousel/indexView.vue'

interface ListItem {
	title: string,
	urls: string[],
	"type": 'a' | 'b' | 'c' | 'd'
	"auth": string,
	"count": number,
	createTime: string,
	'id': string
}

const route = useRoute();
const id = route.params.id
const item = ref<ListItem>()

const getDetailData = async () => {
	const resp = await axios.post('/api/detail', { id })
	item.value = resp.data.data
}


onMounted(() => {
	getDetailData()
})

</script>


<style scoped>
.content {
	padding: 10px;
}

.desc {
	display: flex;
	justify-content: space-between;
}
</style>